<template>
  <div class="pro-item-wp">
    <template v-for="(item,index) in product">
      <div class="pro-item" :key="index" @click="$router.push({ 'path': '/mall/goods', query: { sn: item.goods_sn } })">
        <div class="image">
          <van-skeleton avatar :loading="isLoading" :avatar-size="$tools.toPX(340)">
            <van-image :width="$tools.toPX(width)" :height="$tools.toPX(width)" fit="contain" lazy-load :src="item.goods_img">
              <template v-slot:loading>
                <van-loading type="spinner" size="24" />
              </template>
            </van-image>
          </van-skeleton>
        </div>
        <div class="pro-item-info-wp">
          <van-skeleton :row="3" title :loading="isLoading">
            <div class="title van-multi-ellipsis--l2">{{item.goods_name}}</div>
            <div class="coupon" v-if="item.couponInfo">{{item.couponInfo.coupon_name}}</div>
            <div class="price">
              <span class="m-price">{{item.shop_price}}</span>
            </div>
          </van-skeleton>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  name: 'ProductList',
  data () {
    return {

    };
  },
  props: {
    value: {
      type: Boolean
    },
    product: {
      type: Array
    },
    width: {
      type: Number,
      default: 340
    }
  },
  computed: {
    isLoading: {
      get: function () {
        return this.value;
      },
      set: function (val) {
        this.$emit('input', val);
      }
    }
  },
  methods: {

  }
};
</script>
<style scoped lang="less">
</style>
